<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/js/vue.js"></script>
        <link rel="stylesheet" href="/css/element-ui.css"/>
        <script src="/js/element-ui.js"></script>
        <script src="/js/host_config.js"></script>
        <script src="/js/axios.js"></script>
        <script src="/js/components/authorizeCmpt.js"></script>
        <script src="/js/components/apiCall.js"></script>
        <script src="/js/components/createOrdinaryCmpt.js"></script>
        <script src="/js/components/apiAuditCmpt.js"></script>
        <script src="/js/vue-json-viewer.js"></script>
    </head>
    <body>
        <div class="index1" id="index1">
            <div style="display: flex">
                <div style="width: 12%;min-width: 205px">
                    <el-row class="tac unSelected">
                        <el-col :span="12">
                            <el-menu
                                    :default-active="activeIndex"
                                    class="el-menu-vertical-demo"
                            >
                                <el-menu-item index="1" @click="change('/portal/index')">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">&nbsp;&nbsp;概&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;览</span>
                                </el-menu-item>
                                <el-menu-item index="2" @click="change('/portal/service?size=12&current=1')">
                                    <i class="el-icon-position"></i>
                                    <span slot="title">&nbsp;&nbsp;服务中心</span>
                                </el-menu-item>
                                <el-menu-item index="3" @click="change('app-view-cmpt')">
                                    <i class="el-icon-user"></i>
                                    <span slot="title">&nbsp;&nbsp;应用列表</span>
                                </el-menu-item>
                                <el-menu-item index="4" @click="change('components-library-cmpt')">
                                    <i class="el-icon-s-operation"></i>
                                    <span slot="title">&nbsp;&nbsp;插&nbsp;&nbsp;件&nbsp;&nbsp;库</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>

                <div style="display: flex;flex-direction: column;width: 87%; min-width: 1200px">
                    <div style="height: 60px;width: 100%;display: flex;flex-direction: row;align-items: center;margin-left: 43px">
                        <el-input style="width: auto" disabled placeholder="Name example 'API'"></el-input>
                        <el-input style="width: auto;margin: 0 0 0 15px" disabled
                                  placeholder="Path example '/api'"></el-input>
                        <template>
                            <div class="block" style="margin: 0 15px 0 15px">
                                <el-date-picker
                                        disabled
                                        v-model="value1"
                                        type="daterange"
                                        range-separator="To"
                                        start-placeholder="Start time"
                                        end-placeholder="End time">
                                </el-date-picker>
                            </div>
                        </template>
                        <el-button type="primary" disabled icon="el-icon-search">Search</el-button>
                        <el-button type="success" @click="initApi" :icon="refreshIcon">Refresh</el-button>
                        <el-dropdown trigger="click" style="margin-left: 15px">
                            <el-button type="warning" icon="el-icon-edit-outline">新建API</el-button>
                            <el-dropdown-menu slot="dropdown">
                            <span @click="createApi('ordinary')">
                                <el-dropdown-item style="color:#409eff;" icon="el-icon-cpu">
                                    Ordinary API
                                </el-dropdown-item>
                            </span>
                                <el-dropdown-item icon="el-icon-cpu" style="color:#409eff;">SMS Service
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <div style="height: auto;display: flex;flex-direction: row;flex-wrap:wrap">
                        <el-col :span="7" th:each="item : ${apiData}"
                                style="margin: 25px 40px 20px 40px;width: 350px;">
                            <el-col>
                                <el-dropdown trigger="click">
                                    <el-card shadow="hover" style="overflow: hidden">
                                        <div style="display: flex; align-items: center;">
                                            <img class="unSelected" alt="加载异常"
                                                 th:src="${logo}"
                                                 width="73"
                                                 height="73" style="padding-right: 15px">
                                            <div style="display: flex;flex-direction: column">
                                                <span class="unSelected"
                                                      style="font-size: 16px;text-align: left;width: auto;font-weight: bold"
                                                      th:text="${item.name}"></span>
                                                <span style="text-align: left;font-size: 13px;margin-top: 3px"
                                                      class="truncate">
                                                    <span>
                                                        <el-tag class="unSelected" size="mini"
                                                                th:text="${ item.type}"></el-tag>
                                                    </span>&nbsp;&nbsp;
                                                    <span>
                                                    <el-tag class="unSelected" type="success" size="mini"
                                                            th:text="${item.method}"></el-tag>
                                                    </span>&nbsp;&nbsp;<span class="unSelected"
                                                                             th:text="${item.createTime}"></span>
                                                 </span>
                                                <span class="truncate"
                                                      style="display: inline-block;white-space: nowrap;text-align: left;font-size: 13px;overflow: hidden;max-width: 218px;margin-top: 3px"><span>
                                                <el-tag size="mini" type="warning" th:text="${item.path}"></el-tag>
                                                </span>
                                                    <span class="unSelected"
                                                          th:text="${item.description}">&nbsp;&nbsp;</span></span>
                                            </div>
                                        </div>
                                    </el-card>
                                    <el-dropdown-menu slot="dropdown" class="unSelected">
                                        <span @click="onlineTest($event)" th:attr="data-item=${item}">
                <el-dropdown-item icon="el-icon-stopwatch">在线测试</el-dropdown-item>
              </span>
                                        <span @click="edit($event)" th:attr="data-item=${item}">
                <el-dropdown-item icon="el-icon-edit-outline">编辑</el-dropdown-item>
              </span>
                                        <span @click="authorization($event)" th:attr="data-item=${item}">
                <el-dropdown-item icon="el-icon-connection">授权</el-dropdown-item>
              </span>
                                        <span>
                <el-dropdown-item icon="el-icon-edit" disabled th:if="${item.createBy == null or item.createBy == ''}">修订</el-dropdown-item>
              </span>
                                        <!--                                        <span @click="$refs['authorized'].apiAvailable(apiData[index])">-->
                                        <!--                <el-dropdown-item icon="el-icon-switch-button" v-if="!item.createBy">{{-->
                                        <!--                        item.available ? "禁用" : "启用"-->
                                        <!--                    }}</el-dropdown-item>-->
                                        <!--              </span>-->
                                        <!--                                                                                <span @click="$refs['authord'].deleteApi(apiData[index].idApi)">-->
                                        <!--                                                        <el-dropdown-item icon="el-icon-delete" v-if="!item.createBy">删除</el-dropdown-item>-->
                                        <!--                                                      </span>-->
                                        <span @click="logView($event)" th:attr="data-item=${item}">
                <el-dropdown-item icon="el-icon-document">日志</el-dropdown-item>
              </span>
                                        <span @click="updateCache($event)" th:attr="data-item=${item}">
                <el-dropdown-item icon="el-icon-film">更新缓存</el-dropdown-item>
              </span>

                                        <span>
                <el-dropdown-item disabled icon="el-icon-map-location" th:if="${item.createBy == null or item.createBy == ''}">上架门户</el-dropdown-item>
              </span>
                                        <span @click="onlineEnv($event)" th:attr="data-item=${item}">
                <el-dropdown-item icon="el-icon-set-up">上线多环境</el-dropdown-item>
              </span>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-col>
                        </el-col>
                    </div>
                    <div style="text-align: left;">
                        <el-pagination
                                v-show="apiData.length > 0"
                                style="margin-left: 48px"
                                :page-size="12"
                                layout="prev, pager, next"
                                :current-page.sync="apiPage[0]"
                                @current-change="initApi"
                                :total="apiPage[1]">
                        </el-pagination>
                    </div>
                    <api-audit-cmpt style="z-index: 100" ref="api_log"></api-audit-cmpt>
                    <api-call ref="apiCall"></api-call>
                    <create-ordinary-cmpt ref="ordinary"></create-ordinary-cmpt>
                    <authorize-cmpt ref="authord"></authorize-cmpt>
                </div>
            </div>
        </div>
    </body>

    <script>
        Vue.component('JsonViewer', window.JsonView.default); // 注册组件
        let vms = new Vue({
            el: "#index1",
            components: {
                apiCall,
                authorizeCmpt,
                createOrdinaryCmpt,
                apiAuditCmpt,
                JsonViewer: window.JsonView.default
            },
            data() {
                return {
                    activeNames: ['1', '2'],
                    apiData: [],
                    value1: '',
                    apiPage: [1],
                    activeIndex: '2',
                    currentAuthApi: '',
                    icon: ['el-icon-refresh', 'el-icon-loading'],
                    refreshIcon: "el-icon-refresh",
                }
            },
            methods: {
                onlineEnv(event) {
                    let data = JSON.parse(event.target.parentNode.getAttribute('data-item'))
                    let cmpt = this.$refs['authord']
                    cmpt.initEnv(data.idApi, data.env)
                },
                updateCache(event) {
                    let data = JSON.parse(event.target.parentNode.getAttribute('data-item'))
                    this.$refs['authord'].refreshCache(data.idApi)
                },
                change(i) {
                    window.open(i, "_self")
                },
                authorization(event) {
                    let data = JSON.parse(event.target.parentNode.getAttribute('data-item'))
                    let cmpts = this.$refs['authord']
                    cmpts.dialogVisible = true
                    cmpts.initCmpt(data.idApi)
                },
                logView(event) {
                    let data = JSON.parse(event.target.parentNode.getAttribute('data-item'))
                    this.$refs['api_log'].getAudit(data.idApi, 1)
                },
                edit(event) {
                    let data = JSON.parse(event.target.parentNode.getAttribute('data-item'))
                    this.$refs['ordinary'].drawer = true;
                    this.$refs['ordinary'].data = data
                    this.$refs['ordinary'].initCmpt()
                    this.$refs['ordinary'].analyze()
                },
                onlineTest(event) {
                    let data = JSON.parse(event.target.parentNode.getAttribute('data-item'))
                    let toll = this.$refs['apiCall']
                    toll.drawer = true;
                    toll.data = data
                },
                initApi() {
                    window.location.reload()
                },
                createApi(i) {
                    switch (i) {
                        case 'ordinary':
                            this.$refs['ordinary'].drawer = true
                            this.$refs['ordinary'].initCmpt()
                            this.$refs['ordinary'].clear()
                            this.$refs['ordinary'].data = null
                    }
                },
                formatDate(data) {
                    if (data == null)
                        return null;
                    const dt = new Date(data);
                    const localDt = new Date(dt.getTime() + (8 * 60 + dt.getTimezoneOffset()) * 60 * 1000); // 加上时差并转换为北京时间
                    const year = localDt.getFullYear();
                    const month = String(localDt.getMonth() + 1).padStart(2, '0');
                    const day = String(localDt.getDate()).padStart(2, '0');
                    const hours = String(localDt.getHours()).padStart(2, '0');
                    const minutes = String(localDt.getMinutes()).padStart(2, '0');
                    const seconds = String(localDt.getSeconds()).padStart(2, '0');
                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                },
                refresh(e) {
                    if (e) {
                        this.initApi()
                    }
                },

            }, mounted() {

            }
        })

    </script>
    <style>
        .el-collapse-item__header {
            font-size: 17px !important;
            font-weight: bold !important;
        }

        .el-card__body, .el-main {
            padding: 20px;
        }

        .truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 218px; /* 设置一个宽度以触发文本溢出 */
            display: inline-block;
        }


        .el-menu-item {
            width: 200px !important;
            height: 100%;
        }

        .el-col-12 {
            width: 100% !important;

        }

        .tac {

        }

        .unSelected {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none;
        }

        .el-menu {
            background: none;
        }

        .headers-inp {
            width: auto;
            border: none;
            height: 100%;
            background-color: #FFFFFF;
            outline: none;
            color: #606266;
        }

        .el-select .el-input {
            width: 130px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        .delHeads:hover {
            color: rgb(64, 158, 255) !important;
        }

        .addHeads:hover {
            color: rgb(64, 158, 255) !important;
        }

        .delPara:hover {
            color: rgb(64, 158, 255) !important;
        }

        .addPara:hover {
            color: rgb(64, 158, 255) !important;
        }

        .transfer {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .title {
            font-weight: bold;
            line-height: 40px;
            width: 130px;
            text-align: right;
            padding-right: 10px;
            font-size: 15px;
        }

        .description {
            font-size: 13px;
            color: rgb(168, 168, 168)
        }

        .create-item {
            display: flex;
            flex-direction: row;
            padding-bottom: 20px;
        }

        .create-sub-item {
            display: flex;
            flex-direction: column;
            text-align: left
        }

        .body-content {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-bottom: 10px;
        }

        .components {
            width: 390px;
        }

        .box-card {
            width: 97%;
        }

        .backend-server {
            display: flex;
            flex-direction: row;
            padding-bottom: 5px;
        }


        .success {
            color: rgba(30, 225, 139, 0.82);
        }

        .error {
            color: #E30910F9;
        }

        .error-line {
            border: 1px solid #E30910F9;
            width: 100%
        }

        .success-line {
            border: 1px solid rgba(30, 225, 139, 0.82);
            width: 100%
        }

        .warning {
            color: rgba(212, 225, 30, 0.82);
        }

        .warning-line {
            border: 1px solid rgba(212, 225, 30, 0.82);;
            width: 100%
        }

        .v-modal {
            z-index: 0 !important;
        }
    </style>
</html>